<script setup lang="ts">
type Flag = 'red' | 'blue'
interface Props {
  days: string[]
  arr: number[]
  color: Flag
}

const props = defineProps<Props>()

function calcWidth(i: number) {
  if (i === props.days.length) return 0

  let y = 220 * (Math.abs(props.arr[i] - props.arr[i - 1]) / 100)
  return Math.sqrt((400 / 6) * (400 / 6) + y * y)
}

function calcAngle(i: number) {
  if (i === props.days.length) return `rotate(0deg)`

  let y = 220 * ((props.arr[i] - props.arr[i - 1]) / 100)
  const angle = (Math.atan2(y, 400 / 6) * 180) / Math.PI

  return `rotate(${angle}deg)`
}
</script>

<template>
  <div
    :class="['point', color, days[i - 1]]"
    :style="{ top: arr[i - 1] + '%' }"
    v-for="i in 7"
    :key="i"
  >
    <div class="line" :style="{ width: calcWidth(i) + 'px', transform: calcAngle(i) }"></div>
    <div :class="['value', color]">{{ arr[i - 1] }}</div>
  </div>
</template>

<style lang="scss" scoped>
@import './common.scss';

.point {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 100%;
  cursor: pointer;

  .line {
    position: absolute;
    height: 1.5px;
    top: 25%;
    left: 6%;
    transform-origin: 0 0;
  }

  &:hover {
    .value {
      visibility: visible;
      opacity: 1;
    }
  }

  .value {
    position: absolute;
    font-size: 0.85rem;
    width: 2rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    color: #fff;
    border-radius: 0.3rem;
    bottom: 1.3rem;
    left: -0.8rem;

    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;

    &::after {
      content: ' ';
      position: absolute;
      background-color: inherit;
      width: 0.55rem;
      height: 0.55rem;
      bottom: -0.3rem;
      left: 50%;
      z-index: 0;
      transform: translateX(-50%) rotate(45deg);
    }
  }
}

.blue {
  background-color: #7ba2ff;
  .line {
    background-color: #7ba2ff;
  }
}

.red {
  background-color: #fa7373;
  .line {
    background-color: #fa7373;
  }
}
</style>
